<template>
  <div>
    <div class="modal-mask"></div>
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="content-text">
          <img
            src="https://my-wechatl.oss-cn-beijing.aliyuncs.com/e9c66d8eb8ed4dcb211bedc7246aaa6.png"
          />
        </div>
      </div>

      <div class="modal-footer">
        <button
          open-type="getUserInfo"
          lang="zh_CN"
          class="btn"
          @getuserinfo="login"
        >
          授权登录
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import config from "@/config";
import qcloud from "wafer2-client-sdk";
// 这里的import是因为exprot时没有写default
import { showSuccess } from "@/utli";
export default {
  methods: {
    login() {
      qcloud.setLoginUrl(config.loginUrl);
      qcloud.login({
        success: (userInfo) => {
          console.log("登录成功", userInfo);
          this.loginSuccess(userInfo);
          // this.$emit子组件信息传递到父组件
          this.$emit("changeShow", false, userInfo);
          // 登录成功显示导航栏
          wx.showTabBar();
          showSuccess("登录成功");
        },
        fail: (err) => {
          console.log("登录失败", err);
        },
      });
    },

    // userinfo缓存信息
    loginSuccess(userInfo) {
      wx.setStorageSync("userinfo", userInfo);
    },
  },
};
</script>

<style lang="scss">
/* //弹窗样式 */
.modal-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 9000;
  color: #fff;
}
.modal-dialog {
  box-sizing: border-box;
  width: 560rpx;
  overflow: hidden;
  position: fixed;
  top: 30%;
  left: 0;
  z-index: 9999;
  background: #fff;
  margin: -150rpx 95rpx;
  border-radius: 16rpx;
}
.modal-content {
  box-sizing: border-box;
  display: flex;
  padding: 0rpx 53rpx 50rpx 53rpx;
  // font-size: 20px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.content-tip {
  text-align: center;
  font-size: 36rpx;
  color: #333333;
}
.content-text {
  height: 130px;
  padding: 10px 0px 50px 0px;
  font-size: 14px;
}
.modal-footer {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  border-top: 1px solid #e5e5e5;
  font-size: 16px;
  font-weight: bold;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background: #feb600;
}
.btn {
  width: 100%;
  background: #feb600;
  color: #ffffff;
  font-weight: bold;
}
.img {
  width: 280px;
  height: 90px;
}
.little-tip {
  padding-top: 15px;
  padding-bottom: 3px;
  font-size: 14px;
  font-weight: bold;
  color: #feb600;
}
.little-content {
  padding-top: 5px;
  font-size: 13px;
  color: #606060;
}
.key-bold {
  padding-top: 5px;
  font-size: 14px;
  font-weight: bold;
}
</style>